<template>
  <div class="wrapper-right">
    <div class="title-box">
      <Title title="营业部蜗牛榜" style="color: #ffba00" />
      <i class="iconfont icon-woniu2"></i>
      <el-select  v-model="flag" @change="flagChange" style="width:35%;margin-left: 10px;">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="card-box">
      <el-card v-if="tableData.length !== 0" class="card-item cursor" :header-style="{ padding: '15px' }" :body-style="{ padding: '10px 15px' }"
        v-for="(item, index) in tableData" :key="index" style="margin-bottom: 10px"
        @click.native="$emit('item-click', item)">
        <!-- <img
          class="card-top-icon"
          src="@/assets/images/home/rqTop.png"
          v-if="item.assessment == 5"
          alt=""
        /> -->
        <div class="card-header">
          <span class="card-title">
            <i class="iconfont icon-quyufengongsi"></i>
            {{ item.branch }}</span>
        </div>
        <div class="card-body">
          <!-- <div class="card-body-item">
            <span class="card-body-item-title">所属营业部：</span>
            <span class="card-body-item-content">{{ item.branch }}</span>
          </div> -->
          <div class="card-body-item">
            <span class="card-body-item-title">上榜原因：</span>
            <div>
              <span class="card-body-item-content">{{ item.reasons }}</span>
              <span class="card-body-item-content-sub" v-if="item.reasonstype=='1'">
                <i v-for="item in 5" :key="item" class="iconfont icon-snails"></i>
              </span>
              <span class="card-body-item-content-sub" v-if="item.reasonstype=='2'">
                <i v-for="item in 3" :key="item" class="iconfont icon-snails"></i>
              </span>
            </div>

            <!-- <span class="card-body-item-content"
              ><el-rate
                v-model="item.assessment"
                disabled
                :colors="['#e4393c', '#e4393c', '#e4393c']"
                disabled-void-color="#c8c8c8"
              ></el-rate
            ></span> -->
          </div>

          <!-- <div class="card-body-item">
            <span class="card-body-item-title">场景评价：</span>
            <span class="card-body-item-content">
              <div v-if="item.process == '1'">
                <el-tag type="success">好</el-tag>
              </div>
              <div v-if="item.process == '2'">
                <el-tag type="warning">一般</el-tag>
              </div>
              <div v-if="item.process == '3'">
                <el-tag type="danger">差</el-tag>
              </div>
            </span>
          </div> -->
        </div>
      </el-card>
      <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
    </div>
  </div>
</template>

<script>
  import { countByRanking } from "@/api/home";
  import { getDeptTree } from "@/api/system/user";
  import { countPesentData } from "@/api/system/target";
  import { businessDepartment } from "@/api/system/top";
  import Title from "../Title";
  import store from "@/store";
  export default {
    name: "HomeRight",
    components: { Title },
    props: {
      targetTime: null
    },
    watch: {
      targetTime: function (newVal, oldVal) {
        if (newVal == null || newVal == "") {
          this.postData.targetTime = this.formatDate();
        }
        else {
          this.postData.targetTime = newVal;
        }
        this.getAllBusinessDepartment(this.postData)
      }
    },
    data() {
      return {
        postData: {
          // deptId: 219,
          // deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
          descending: false,
          targetTime: this.formatDate(),
        },
        flag: 0, //0:发展量为零 1:发展量缓慢 
        selectOptions: [
          { label: "活动未开展", value: 0 },
          { label: "完成率低", value: 1 },
        ],
        //正常排名数据
        tableDataList: [],
        tableDataZeroList:[], //发展量为零的数据
        tableDataNonZeroList:[], //发展量缓慢的数据
        //页面展示数据
        tableData: [],
        // tableData: [
        //   {
        //     branch: "范家湾营业部",
        //     community: "丰和丽园",
        //     assessment: 5,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "十里店营业部",
        //     community: "水岸天成",
        //     assessment: 5,
        //     process: "1",
        //     reasons: "完成率低",
        //     reasonstype: "2",
        //   },
        //   {
        //     branch: "皋兰路营业部",
        //     community: "路桥音乐广场",
        //     assessment: 4,
        //     process: "3",
        //     reasons: "完成率低",
        //     reasonstype: "2",
        //   },
        //   {
        //     branch: "庆阳路营业部",
        //     community: "六尺新苑",
        //     assessment: 3.6,
        //     process: "2",
        //     reasons: "完成率低",
        //     reasonstype: "2",
        //   },
        //   {
        //     branch: "兰大营业部",
        //     community: "酒钢大厦",
        //     assessment: 3,
        //     process: "2",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "省委营业部",
        //     community: "中广宜景湾",
        //     assessment: 1.5,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "和平路营业部",
        //     community: "红山铝茵小区",
        //     assessment: 3,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "铁路局营业部",
        //     community: "金轮花园",
        //     assessment: 5,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "定西路营业部",
        //     community: "和平人家",
        //     assessment: 4,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        //   {
        //     branch: "南关营业部",
        //     community: "贡元巷平台小区",
        //     assessment: 2,
        //     process: "1",
        //     reasons: "活动未开展",
        //     reasonstype: "1",
        //   },
        // ],
      };
    },
    created() {
      //this.getDeptTree(100);
      //this.countByRanking({ deptId: 100 })
      // this.getCountPesentData(this.postData)
      // if (this.postData.deptId == 221) {
      //   this.tableData = this.tableDatacs1;
      // } else {
      //   this.tableData = this.tableDatacs2;
      // }
      this.getAllBusinessDepartment(this.postData)
    },
    methods: {
      flagChange(){
        if(this.flag == 0){
          this.tableData = this.tableDataZeroList;
        }else{
          this.tableData = this.tableDataNonZeroList;
        }
      },
      formatDate(date = new Date()) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      getAllBusinessDepartment(postData) {
        this.tableData = [],
        this.tableDataZeroList = [],
        this.tableDataNonZeroList = [],
        businessDepartment(postData).then((response) => {
          
          //发展量为零的数据
            response.data.zeroList.forEach((item, index) => {
              this.tableDataZeroList.push({
                deptId: item.deptId,
                branch: item.deptName,
                reasons:'活动未开展' ,
                reasonstype: '1' ,
              });
            });
            //发展量缓慢的数据
            response.data.nonZeroList.forEach((item, index) => {
              this.tableDataNonZeroList.push({
                deptId: item.deptId,
                branch: item.deptName,
                reasons:  '完成率低',
                reasonstype:  '2',
              });
            });
            this.tableData = this.tableDataZeroList

        });
      },
      getCountPesentData(postData) {
        countPesentData(postData).then((response) => {
          response.data.sort((a, b) => {
            return (
              b.percent.substring(0, b.percent.length - 1) -
              a.percent.substring(0, a.percent.length - 1)
            );
          });
          response.data.forEach((item, index) => {
            // this.tableData.push({
            //   rank: index + 1,
            //   community: item.deptName,
            //   marketingTime: item.marketingTime,
            //   accomplish: item.percent,
            //   isOk: item.finished,
            // });
          });
        });
      },

      /** 查询部门下拉树结构 */
      async getDeptTree(deptId) {
        getDeptTree({ deptId: deptId }).then((response) => {
          var treeData = response.data.children;

          if (deptId == 100) {
            this.salesDepartmentList = [
              {
                deptName: response.data.deptName,
                deptId: response.data.deptId,
              },
              {
                deptName: response.data.children[0].deptName,
                deptId: response.data.children[0].deptId,
              },
              {
                deptName: response.data.children[1].deptName,
                deptId: response.data.children[1].deptId,
              },
            ];

            console.log(this.salesDepartmentList, "树结构");
            // this.deptOptions = treeData;
          } else {
            this.baoQuListR = response.data.children;
          }
        });
      },
      countByRanking(data) {
        countByRanking(data).then((response) => {
          console.log(response.data, "小区业务数据统计排名");
          response.data.sort((a, b) => {
            return (
              b.percent.substring(0, b.percent.length - 1) -
              a.percent.substring(0, a.percent.length - 1)
            );
          });
          response.data.forEach((item, index) => {
            // this.tableData.push({
            //   rank: index + 1,
            //   community: item.deptName,
            //   accomplish: item.percent,
            //   isOk: item.finished,
            // });
          });
        });
      },

      getRanking(rank) {
        if (rank == "1") {
          return "first";
        } else if (rank == "2") {
          return "second";
        } else if (rank == "3") {
          return "third";
        } else {
          return "other";
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  // @import url(//at.alicdn.com/t/c/font_4986911_ry2iyynfud.css);

  .cursor {
    cursor: pointer;
  }

  .wrapper-right {
    width: 100%;
    height: 100%;

    .title-box {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #ffba00;

      i {
        font-size: 26px;
        margin-bottom: 16px;
      }
    }

    .card-box {
      height: 95%;
      margin-top: 2px;
      /* overflow: hidden; */
      /* display: flex;
    flex-wrap: wrap; */
      /* justify-content: space-between; */
      overflow: auto;

      .card-item {
        width: 100%;
        position: relative;

        .card-top-icon {
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          transform: rotate(30deg);
        }

        .card-header {
          margin-bottom: 10px;

          .card-title {
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;

            .iconfont {
              font-size: 24px;
              font-weight: normal;
              color: #ffba00;
              margin-right: 5px;
            }
          }
        }

        .card-body {
          line-height: 24px;

          .card-body-item {
            display: flex;
            align-items: center;

            .card-body-item-title {
              color: #ffba00;
            }

            span.card-body-item-content-sub {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  /* .snailSelect{
    width: 60%;
  } */

  ::v-deep .el-card {
    border: 1px solid #c8c8c8;
  }
</style>
